<!--
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~
  -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Camel Service in Action</title>
  <style type="text/css" media="screen">
    #editor {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div style="position: absolute; top: 10px; width: 100%; height: 50px">
  <button onclick="loadCamelRoutes();" class="btn btn-primary">Load</button>
  <button onclick="updateCamelRoutes()" class="btn btn-primary">Update</button>
</div>

<div id="editor" style="position: absolute; top: 50px ; width: 600px; height: 300px"></div>

<div id="JobInfo" style="position: absolute; top: 50px; left: 650px ; width: 600px; height: 300px"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.3/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  function loadCamelRoutes() {
    $.get("/camel/routes", function(data) {
    editor.setValue(data);
    });
  }

  function updateCamelRoutes() {
    $("#JobInfo").text(editor.getValue());
    $.post("/camel/routes", editor.getValue());
  }

</script>

<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/chrome");
    editor.session.setMode("ace/mode/xml");
</script>
</body>
</html>
